<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <div class="big-mains">
    <ScaleScreen
      :width="1920"
      :height="1080"
      class="scale-wrap"
    >
      <div class="bg">
        <div  class="host-body">
          <!-- 头部 s -->
          <div class="d-flex jc-center title_wrap">
            <div class="zuojuxing"></div>
            <div class="youjuxing"></div>
            <div class="guang"></div>
            <div class="d-flex jc-center">
              <div class="title">
                <span class="title-text">实时订单可视化平台</span>
              </div>
            </div>
            <div class="timers">
              {{ dateYear }} {{ dateWeek }} {{ dateDay }}
              <i
                class="blq-icon-shezhi02"
                style="margin-left: 10px"
                @click="showSetting"
              ></i>
            </div>
          </div>
          <!-- 头部 e-->
          <!-- 内容  s-->
          <div class="search-container">
            <el-form :inline="true" :model="queryForm" label-width="120px" label-position="right">
              <el-form-item label="订单编号">
                <el-input v-model="queryForm.orderId" placeholder="请输入订单编号"></el-input>
              </el-form-item>
              <el-form-item label="客户名称">
                <el-input v-model="queryForm.customerName" placeholder="请输入客户名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery">
                  <i class="el-icon-search"></i> 查询
                </el-button>
                <el-button class="reset-btn" @click="resetForm">
                  <i class="el-icon-refresh"></i> 重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="contents">
            <div class="contetn_left">
              <ItemWrap class="contetn_left-center contetn_lr-item" title="PCBA检测">
                <LeftCenter />
              </ItemWrap>
              <!-- <ItemWrap class="contetn_left-center contetn_lr-item" title="整表测试台检测">
                <LeftCenter />
              </ItemWrap> -->
              <ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
                <LeftTop/>
              </ItemWrap>
            </div>
            <div class="contetn_center">
              <ItemWrap class="contetn_center-bottom" title="安装计划">
                <CenterBottom />
              </ItemWrap>
            </div>
            <div class="contetn_right">
              <ItemWrap class="contetn_left-center contetn_lr-item" title="整表出厂测试检测">
                <LeftCenter />
              </ItemWrap>
              <ItemWrap class="contetn_left-center contetn_lr-item" title="整表出厂测试检测">
                <LeftCenter />
              </ItemWrap>
            </div>
          </div>
          <!-- 内容 e -->
        </div>
      </div>
    </ScaleScreen>
  </div>

</template>

<script>
import { formatTimes } from "../../utils/index.js";
import ItemWrap from './components/item-wrap/item-wrap.vue'
import LeftCenter from "./components/left-center.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import LeftTop from './components/left-top.vue'
import CenterBottom from './components/center-bottom.vue'
export default {
  components: { ScaleScreen,ItemWrap, LeftCenter,LeftTop,CenterBottom},
  data() {
    return {
      queryForm: {
        orderId: '',
        customerName: '',
      },
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    handleQuery() {
      console.log(this.queryForm);
    },
    resetForm() {
      this.queryForm = {
        orderId: '',
        customerName: '',
      }
    },

    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTimes(new Date(), "HH: mm: ss");
        this.dateYear = formatTimes(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
  },
};
</script>

<style lang="scss">
@import "../../styles/home.scss";
.big-mains{
  // width: 100vw;
  // height: 100vh;
  background-color: #03050C;
  .search-container {
      margin: 3% 0 2%;
      text-align: right;
      background-color: rgba(10, 15, 25, 0.6);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(70, 130, 255, 0.3);
      position: relative;
      overflow: hidden;
    }

    .search-container::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        120deg,
        rgba(30, 50, 120, 0.1),
        rgba(40, 60, 140, 0.2),
        rgba(30, 50, 120, 0.1)
      );
      background-size: 400% 400%;
      z-index: -1;
      animation: shineBg 10s ease infinite;
      border-radius: 8px;
    }

    @keyframes shineBg {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    .el-form-item__label {
      color: #e0e0e0;
      font-weight: bold;
      text-shadow: 0 0 5px rgba(74, 158, 255, 0.3);
    }

    .el-input__inner {
      background-color: rgba(10, 15, 25, 0.6);
      border: 1px solid rgba(70, 130, 255, 0.5); /* 调整未聚焦时的边框颜色 */
      color: white;
      height: 45px;
      border-radius: 6px;
      padding: 0 15px;
      position: relative;
      overflow: hidden;
    }

    .el-input__inner::before {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, transparent, rgba(74, 158, 255, 0.8), transparent);
      z-index: -1;
      animation: borderGlow 3s linear infinite;
      pointer-events: none;
    }

    @keyframes borderGlow {
      0% {
        box-shadow: 0 0 5px rgba(74, 158, 255, 0.3);
      }
      25% {
        box-shadow: 5px 0 10px rgba(74, 158, 255, 0.6);
      }
      50% {
        box-shadow: 0 0 15px rgba(74, 158, 255, 0.9);
      }
      75% {
        box-shadow: -5px 0 10px rgba(74, 158, 255, 0.6);
      }
      100% {
        box-shadow: 0 0 5px rgba(74, 158, 255, 0.3);
      }
    }

    .el-input__inner::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }

    .el-input__inner:focus {
      border-color: rgba(100, 180, 255, 0.8);
      box-shadow: 0 0 8px rgba(100, 180, 255, 0.5);
      outline: none;
    }

    .el-button {
      background-color: #4a6bff;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 0 20px;
      height: 45px;
      margin-left: 10px;
      transition: all 0.3s ease;
    }

    .el-button:hover {
      background-color: #3558cc;
      box-shadow: 0 0 10px rgba(53, 88, 204, 0.5);
    }

    .el-button:active {
      background-color: #2a48b0;
      transform: translateY(2px);
    }

    .el-button--primary {
      background-color: #4a9eff;
    }

    .el-button--primary:hover {
      background-color: #3583d9;
    }

    .el-button.reset-btn {
      background-color: #666;
    }

    .el-button.reset-btn:hover {
      background-color: #555;
    }
}
// 内容
.contents {
  width: 100%;
  display: flex;
  min-height: calc(100% - 60px);
  justify-content: space-between;
  .contetn_left,
  .contetn_right {
    width: 540px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 720px;
  }

  //左右两侧 三个块
  .contetn_lr-item {
    height: 310px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    position: relative;
    gap: 30px;

  
  }
}


@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
